<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft"> </van-nav-bar>
        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false"
            @scrolltolower="loadMore">
            <view class="tabTop">
                <view class="title"> {{navBarTitle}} </view>
                <!-- <view class="checkedInDay">连续签到7天奖励</view>
                <view class="mysteryBoxProgress">
                    <view >
                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/mysteryBox.png" alt="" style="width:100%; height:auto" mode="widthFix" />
                    </view>
                    <view></view>
                </view> -->

                <!-- 余额 -->
                <view class="accountBalance">
                    <view class="accountBalance-label">余额</view>
                    <view class="accountBalance-content">{{walletBalance}}</view>
                </view>
                <!-- 可提现 -->
                <view class="withdrawable">
                    <view class="withdrawable-label">可提现</view>
                    <view class="withdrawable-content">{{withdrawable}}</view>
                </view>
                <view class="tips">
                    当日通过微信充值的账户余额，可在当日消费，可在次日工作日上午9点后提现
                </view>
                <!-- 按钮区域 -->
                <view class="btnArea">
                    <button plain type="default" class="button" @click="toWithdrawable">提现</button>
                    <button plain class="checkBtn" @tap="toRecharge">充值</button>
                </view>
                <!-- 记录 -->
                <view class="myScoreDetail">
                    <view class="myScoreDetail_title " @tap="showPopup"> <span class="r16">余额明细</span> <van-icon
                            name="arrow-down" :style="textColor" /></view>
                    <view class="myScoreDetail_content" v-if="recordsList.length>0">
                        <view class="detailBox" v-for="(item,index) in recordsList" :key="index">
                            <view class="detailBox_left">
                                <view class="left_top">{{item.businessName}} </view>
                                <view class="left_bottom">17乐生活 | {{item.createTime}}</view>
                            </view>
                            <view class="detailBox_right">{{Number(item.amount)>0 ? '+' :''}}{{item.amount}}</view>
                        </view>
                        <view v-if="loading" class="loading-text">正在加载...</view>
                        <view v-if="finished" class="no-more-text">没有更多了</view>
                    </view>
                    <view class="myScoreDetail_content" v-else style="margin-bottom: 62rpx;">
                        <van-empty class="custom-image"
                            image="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/scoreEmpty.png"
                            description="当前筛选项下无余额" />
                    </view>
                </view>
            </view>

        </scroll-view>
        <filterPopup symbol="accountBalance" :filterData="filterData" :show="showFilterPopup" @closePopup="closePopup"
            @confirmFilter="confirmFilter"></filterPopup>

    </view>
</template>

<script>
import {  getMyWalletBalanceDetailApi} from '@/api/mine'
import filterPopup from '@/mycomponents/filterPopup.vue'

export default {
    components: {
        filterPopup
    },
    data() {
        return {
            navBarTitle: '账户余额',
            scrolling:false,
            params:{}, //接受从路由传过来的参数
            walletBalance:'165.30',
            withdrawable:'20.00',
            recordsList:[
                {
                    title:'幸运积分好礼',
                    des:'乐生活 | 2024/11/05  15:20:30',
                    num:'20',
                    status:'add'
                },
                {
                    title:'幸运积分好礼',
                    des:'乐生活 | 2024/11/05  15:20:30',
                    num:'20',
                    status:'add'
                },
                {
                    title:'幸运积分好礼',
                    des:'乐生活 | 2024/11/05  15:20:30',
                    num:'20',
                    status:'add'
                }                
            ],
            pageNum:1,
            pageSize:10,
            total:0,
            loading: false,
            finished: false,
            hasData:false,  //是否有数据
            showFilterPopup:false, //筛选条件弹窗
            filterData:[
                  {
                    id: 0,
                    name: '全部'
                },
                {
                    id: 1,
                    name: '充值'
                },
                {
                    id: 2,
                    name: '消费'
                },
                {
                    id: 3,
                    name: '分销'
                },
            ],
            transactionType:'', // 类型 1-充值, 2-提现 7分销    
        }
    },
    onLoad() {
      
    },
    onReady(){

    },
    onShow(){
        this.getMyWalletBalanceDetail()
    },
    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        },
        loadMore() {
            if (!this.finished) {
                this.getMyWalletBalanceDetail();
            }
        },
        // 显示积分类型
        showPopup(){
            this.showFilterPopup=true
        },
        // 关闭
        closePopup(){
            this.showFilterPopup=false
        },
        // 弹窗内点击事件
        onClickPopup(index,e){
            console.log(index,e,'弹窗内点击事件')
            this.curPopup=index
            this.swiperTabsCurrent = index    //页面顶部的tab
            this.textColor="color:#ff6203"
        },
        // 弹窗里确认
        confirmFilter(pointsType,curPopup){
            console.log(pointsType,curPopup,'余额弹窗里确认')
            this.showFilterPopup=false
            this.transactionType = curPopup==0? '' :curPopup==1? '1' :curPopup==2? '3' :'7'  // 类型 1-充值, 2-提现, 3-消费, 7分销
            this.total = 0
            this.pageNum = 1
            this.pageSize = 10
            this.loading = false
            this.finished = false
            this.hasData =  false
            this.recordsList = []
            this.getMyWalletBalanceDetail(true)
        },
        // 去充值哦
        toRecharge(){
            uni.showToast({
                title: '充值功能暂未开放',
                icon: 'none',
                duration: 2000
            })
            // const params={
            //     pageSign:'recharge'
            // }
            // uni.navigateTo({
			// 	url: '/pages/minePage/rechargePage?params='+
            //     encodeURIComponent(JSON.stringify(params))
			// })
        },
        // 提现
        toWithdrawable(){
            uni.showToast({
                title: '提现功能暂未开放',
                icon: 'none',
                duration: 2000
            })
            // const params={
            //     pageSign:'withdraw'
            // }
            // uni.navigateTo({
			// 	url: '/pages/minePage/rechargePage?params='+
            //     encodeURIComponent(JSON.stringify(params))
			// })
        },
        // 余额及明细 getMyWalletBalanceDetailApi
        getMyWalletBalanceDetail(isFilter) {
            if (this.loading || this.finished) return;
            this.loading = true;
            return new Promise((resolve, reject) => {
                const apiParams = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                }
                if (this.transactionType !== ''){
                    apiParams.transactionType = this.transactionType
                }
                getMyWalletBalanceDetailApi(apiParams).then(res => {
                    console.log(res)
                    if (res.code === 200) {
                        if (!isFilter) {
                            this.walletBalance = res.data?.walletBalance || 0
                        }
                        // this.recordsList=res.data?.userWalletBalanceDetailResponses || []
                        
                        this.total = res.data?.total || 0
                        this.recordsList = this.pageNum === 1
                            ? (res.data?.userWalletBalanceDetailResponses || [])
                            : [...this.recordsList, ...res.data?.userWalletBalanceDetailResponses || []]
                        this.finished = this.recordsList.length >= this.total;
                        this.pageNum++;
                        console.log(this.recordsList, 'this.recordsList')
                        this.hasData = this.recordsList.length > 0
                        resolve(res)
                    } else {
                        reject(res)
                    }
                }).finally(() => {
                    this.loading = false;
                })
            })
        }

    }
}
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar {
    background-color: transparent !important;
    background: transparent !important;
}
::v-deep .van-nav-bar__content{
    background-color: transparent !important;
}
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.tabTop{
    padding:0rpx 48rpx;
}
.title{
    font-size: 60rpx;
    line-height: 60rpx;
    text-align: left;
    color: #111111;
}
.checkedInDay{
    font-size: 28rpx;
    color: #111111;
    line-height: 28rpx;
    margin-top: 43rpx;
}
.mysteryBoxProgress{
    border-bottom:1px solid #f0f0f0;
}
.recordList{
    display:flex;
}
// 余额
.accountBalance{
    margin-top:76rpx ;
    .accountBalance-label{
        font-size: 30rpx;
        line-height: 30rpx;
        text-align: left;
        color: #333333;
        font-weight: bolder;
    }
    .accountBalance-content{
        margin-top: 40rpx;
        font-size: 56rpx;
        line-height: 56rpx;
        text-align: left;
        color: #333333;
    }
}
// 可提现
.withdrawable{
    margin-top: 92rpx;
    .withdrawable-label{
        font-size: 30rpx;
        line-height: 30rpx;
        text-align: left;
        color: #888888;  
    }
    .withdrawable-content{
        margin-top: 30rpx;
        font-size: 40rpx;
        line-height: 40rpx;
        text-align: left;
        color: #888888;
    }
}
// 提示
.tips{
    color: #111111;
    font-size: 24rpx;
    text-align: left;
    margin-top: 60rpx;
}
// 按钮区域
.btnArea{
    padding-top: 50rpx;
    padding-bottom: 50rpx;
    display: flex;
    z-index: 100;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
}


.button{
    background-color: #Ffffff;
    border-radius: 38px;
    font-size:28rpx;
    text-align: center;
    color: #111111;
    height: 86rpx;
    line-height: 86rpx;
    border: 1px solid #D4D4D4 !important;
    width: 45%;
}
.checkBtn{
    background-color: #FF6203;
    border: none;
    border-radius: 38px;
    font-size:28rpx;
    text-align: center;
    color: #FFFFFF;
    height: 86rpx;
    line-height: 86rpx;
    // padding-left: 120rpx;
    // padding-right: 120rpx;
    width: 45%;
}
// button{
//     border: none;
// }
// button[plain]{
//     border:none;
// }
.myScoreDetail{
    padding: 50rpx 0rpx;
    .myScoreDetail_title{
        font-size: 26rpx;
        line-height: 26rpx;
        text-align: left;
        color: #111111;
    }
    .myScoreDetail_content{
        margin-top: 62rpx;
    }
}
.detailBox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 70rpx;

    .detailBox_left{
        .left_top{
            font-size: 26rpx;
            line-height: 26rpx;
            color: #111111;
        }
        .left_bottom{
            margin-top: 22rpx;
            font-size: 24rpx;
            line-height: 24rpx;
            color: #666666;
        }
    }
    .detailBox_right{
        font-size: 26rpx;
        line-height: 26rpx;
        color: #111111;
    }
}
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}

::v-deep .van-cell{
    padding-left: 0px !important;
    border-bottom: 1px solid #f9f9f9;
}
// 滚动条 去掉自带的文字提示  
::v-deep .van-progress__pivot {
	display: none;
}
.r16{
    margin-right:16rpx
}
.loading-text, .no-more-text {
    padding: 20rpx;
    text-align: center;
    color: #888;
    font-size: 24rpx;
}
</style>
